<!-- 图层目录树 -->
<template>
  <div class="tree-container">
    <div class="tree-title" >
      <span>图层目录</span>
      <!-- 点击收起按钮，el-tree组件的display属性为none -->
      <el-icon>
        <ArrowUp  @click="isShow = !isShow" />
      </el-icon>
      <el-icon>
        <Close/>
      </el-icon>
    </div>
    <div class="tree" v-if="isShow">
      <el-tree
        :data="data"
        :props="defaultProps"
        show-checkbox
        :default-expand-all="true"
        :default-checked-keys="checkedKeys"
        node-key="id"
        check-strictly
        @check-change="handleChange"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <img v-if="data.type == 'Reg'" :src="Area" />
            <img v-else-if="data.type == 'Lin'" :src="Line" />
            <img v-else-if="data.type == 'Pnt'" :src="Point" />
            <span>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<script setup>
import { docLayer } from "@/zondyTools/zondy_map/index";
import { asyncGetDocInfo } from "@/zondyTools/mapgis-api/index";
import { onMounted, ref, computed } from "vue";
import { ArrowUp, Close } from "@element-plus/icons-vue";
import Area from "@/assets/img/Area.png";
import Line from "@/assets/img/Line.png";
import Point from "@/assets/img/Point.png";
// 定义默认属性
const defaultProps = {
  children: "children",
  label: "label",
  disabled: "disabled",
};
const isShow = ref(true);
// 定义目录内容
const children = ref([]);
const data = [
  {
    id: 10000,
    label: "地图文档",
    disabled: true,
    children: [
      {
        id: 99999,
        label: "新地图1",
        disabled: true,
        children,
      },
    ],
  },
];
onMounted(() => {
  asyncGetDocInfo("guanggu").then((res) => {
    console.log(res);
    children.value = res;
  });
});
// 默认选中的图层
const checkedKeys = computed(() => {
  return children.value.map((item) => item.id);
});
// 设置点击复选框的事件
const handleChange = (evt, target) => {
  docLayer.setLayerStatus(evt.id, target ? "include" : "exclude");
};

</script>
<style lang="scss">
.tree-container {
  position: absolute;
  top: 80px;
  right: 10px;
  background-color: #fff;
  border: 2px solid white;
  width: 250px;
  .tree-title {
    background: rgba(64, 158, 255);
    color: #fff;
    padding: 5px 10px;
    font-size: 14px;
    display: flex;
    gap:10px;
    cursor:move;
    span{
        flex:1;
    }
  }
  .tree{
    height: 300px
  }
}
.el-checkbox__inner {
  z-index:auto;
}
.el-icon{
  &:hover{
    cursor: pointer;
  }
}
</style>
